refactor(trending): use MMDS HeaderStandard by brianacnguyen · Pull Request #29707 · MetaMask/metamask-mobile

brianacnguyen · 2026-05-05T05:36:20Z

Description

This PR replaces HeaderCompactStandard with HeaderStandard from @metamask/design-system-react-native on Trending UI.

Reason: Align Trending with the MetaMask design system and avoid component-library/components-temp for standard headers.

Changelog

CHANGELOG entry: null

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/DSYS-704

Manual testing steps

Feature: Trending uses design system HeaderStandard

  Scenario: Trending list header
    Given the user opens Trending tokens
    When they view the header title and use back or search as before
    Then navigation and search behavior match prior behavior

  Scenario: Network, sort, and time bottom sheets
    Given the user opens the network selector, price-change sort, or time-range sheet from Trending
    When they view each sheet title and tap close
    Then each sheet dismisses and labels match prior copy

Screenshots/Recordings

Before

After

Pre-merge author checklist

I've followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
I've completed the PR template to the best of my ability
I've included tests if applicable
I've documented my code using JSDoc format if applicable
I've applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Performance checks (if applicable)

I've tested on Android
- Ideally on a mid-range device; emulator is acceptable
I've tested with a power user scenario
- Use these power-user SRPs to import wallets with many accounts and tokens
I've instrumented key operations with Sentry traces for production performance metrics
- See trace() for usage and addToken for an example

For performance guidelines and tooling, see the Performance Guide.

Pre-merge reviewer checklist

I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

Note

Low Risk
Low risk UI refactor that swaps header components; main risk is minor regressions in header/back/close/testID wiring across Trending screens and related tests.

Overview
Updates Trending UI to use the design-system HeaderStandard instead of the temporary HeaderCompactStandard, covering the main Trending list header and the network/price-change/time bottom-sheet headers.

Adjusts a Rewards OndoCampaignRwaSelectorView test to press the new back-button testID emitted by the updated header implementation.

^{Reviewed by Cursor Bugbot for commit 030a1cd. Bugbot is set up for automated code reviews on this repo. Configure here.}

Co-authored-by: Cursor <cursoragent@cursor.com>

github-actions · 2026-05-05T05:36:28Z

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

cursor · 2026-05-05T05:39:02Z

      testID="trending-token-network-bottom-sheet"
    >
-      <HeaderCompactStandard
+      <HeaderStandard


Close button may silently disappear in bottom sheets

High Severity

The old HeaderCompactStandard explicitly converted onClose/closeButtonProps into a close ButtonIcon added to endButtonIconProps. Every existing usage of HeaderStandard in the codebase (MoneyHeader, PerpsHomeHeader) uses only onBack/backButtonProps/endButtonIconProps — none pass onClose or closeButtonProps. If HeaderStandard doesn't implement the same convenience-prop-to-button transformation, the close button in all three bottom sheets silently vanishes without any error.

Additional Locations (2)

app/components/UI/Trending/components/TrendingTokensBottomSheet/TrendingTokenPriceChangeBottomSheet.tsx#L151-L156

app/components/UI/Trending/components/TrendingTokensBottomSheet/TrendingTokenTimeBottomSheet.tsx#L141-L146

^{Reviewed by Cursor Bugbot for commit 3bfd0f2. Configure here.}

github-actions · 2026-05-06T20:09:36Z

🔍 Smart E2E Test Selection

Selected E2E tags: SmokeWalletPlatform
Selected Performance tags: None (no tests recommended)
Risk Level: low
AI Confidence: 88%

click to see 🤖 AI reasoning details

E2E Test Selection:
The PR makes a focused UI component migration across 4 Trending-related files and 1 unit test file:

TrendingListHeader.tsx: Replaces HeaderCompactStandard with HeaderStandard from @metamask/design-system-react-native. This affects the header displayed in the Trending token list view (back button, title).
TrendingTokenNetworkBottomSheet.tsx, TrendingTokenPriceChangeBottomSheet.tsx, TrendingTokenTimeBottomSheet.tsx: Same migration - replacing HeaderCompactStandard with HeaderStandard in the filter/sort bottom sheets within the Trending Tokens view.
OndoCampaignRwaSelectorView.test.tsx: Unit test update changing testID from 'header-back-button' to 'ondo-rwa-selector-header-back-button', indicating the underlying component's testID was also updated as part of the same HeaderStandard migration.

Impact Assessment: These are purely UI component swaps with no business logic changes. The HeaderStandard component from the design system replaces the temporary HeaderCompactStandard. The main risk is that the new component may render differently (visual regression) or have slightly different prop behavior (e.g., back button testID changes as seen in the Rewards test). Navigation behavior (back/close buttons) in Trending views needs validation.

Tag Selection: SmokeWalletPlatform covers the Trending discovery tab including search, browsing content feeds (Tokens section), and browser navigation integration. The Trending views (headers, lists, full views) are explicitly mentioned as part of SmokeWalletPlatform. No other tags are needed since this is purely a Trending UI component change with no impact on confirmations, accounts, networks, swaps, or other feature areas.

Performance: No performance impact expected - this is a component swap within the same rendering hierarchy with no data loading or state management changes.

Performance Test Selection:
The changes are purely UI component migrations (HeaderCompactStandard → HeaderStandard) within Trending views and a unit test testID update. There are no changes to data loading, state management, list rendering performance, or app initialization. No performance impact is expected.

View GitHub Actions results

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

There are 2 total unresolved issues (including 1 from previous review).

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 030a1cd. Configure here.}

cursor · 2026-05-06T20:11:08Z

  it('navigates back when back button is pressed', () => {
    const { getByTestId } = render(<OndoCampaignRwaSelectorView />);
-    fireEvent.press(getByTestId('header-back-button'));
+    fireEvent.press(getByTestId('ondo-rwa-selector-header-back-button'));


Stale HeaderCompactStandard mock is now dead code

Low Severity

The jest.mock for HeaderCompactStandard (lines 74–123) is now dead code. Since TrendingListHeader was changed to import HeaderStandard from @metamask/design-system-react-native instead of HeaderCompactStandard from components-temp, this ~50-line mock block is never exercised during any test in the file. It adds maintenance burden and could confuse future contributors into thinking the mock's hardcoded testID values (e.g. header-back-button, header-title) are still relevant.

^{Reviewed by Cursor Bugbot for commit 030a1cd. Configure here.}

sonarqubecloud · 2026-05-06T20:27:19Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

refactor(trending): use MMDS HeaderStandard

3bfd0f2

Co-authored-by: Cursor <cursoragent@cursor.com>

brianacnguyen self-assigned this May 5, 2026

brianacnguyen added No QA Needed Apply this label when your PR does not need any QA effort. team-design-system All issues relating to design system in Mobile no changelog required No changelog entry is required for this change labels May 5, 2026

github-actions Bot added the size-S label May 5, 2026

cursor Bot reviewed May 5, 2026

View reviewed changes

brianacnguyen added 2 commits May 5, 2026 09:15

Merge branch 'main' into refactor/headerstandard-titles-trending

60f8bea

Updated tests for ondocampaign

8d03523

brianacnguyen requested a review from a team as a code owner May 5, 2026 16:53

Merge branch 'main' into refactor/headerstandard-titles-trending

030a1cd

cursor Bot reviewed May 6, 2026

View reviewed changes

VGR-GIT approved these changes May 7, 2026

View reviewed changes

brianacnguyen added this pull request to the merge queue May 7, 2026

Merged via the queue into main with commit 229b997 May 7, 2026
94 checks passed

brianacnguyen deleted the refactor/headerstandard-titles-trending branch May 7, 2026 17:41

github-actions Bot locked and limited conversation to collaborators May 7, 2026

metamaskbotv2 Bot added the release-7.77.0 Issue or pull request that will be included in release 7.77.0 label May 7, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

refactor(trending): use MMDS HeaderStandard#29707

refactor(trending): use MMDS HeaderStandard#29707
brianacnguyen merged 4 commits into
mainfrom
refactor/headerstandard-titles-trending

brianacnguyen commented May 5, 2026 •

edited by cursor Bot

Loading

Uh oh!

github-actions Bot commented May 5, 2026

Uh oh!

cursor Bot May 5, 2026

Uh oh!

github-actions Bot commented May 6, 2026

Uh oh!

cursor Bot left a comment

Uh oh!

cursor Bot May 6, 2026

Uh oh!

sonarqubecloud Bot commented May 6, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

brianacnguyen commented May 5, 2026 • edited by cursor Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changelog

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Performance checks (if applicable)

Pre-merge reviewer checklist

Uh oh!

github-actions Bot commented May 5, 2026

Uh oh!

cursor Bot May 5, 2026

Choose a reason for hiding this comment

Close button may silently disappear in bottom sheets

Uh oh!

github-actions Bot commented May 6, 2026

🔍 Smart E2E Test Selection

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

cursor Bot May 6, 2026

Choose a reason for hiding this comment

Stale HeaderCompactStandard mock is now dead code

Uh oh!

sonarqubecloud Bot commented May 6, 2026

Quality Gate passed

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

brianacnguyen commented May 5, 2026 •

edited by cursor Bot

Loading